<template>
  <div>
    <div class="min-container">
      <section class="stepBar">
        <el-steps :active="0" align-center>
          <el-step title="填写订单" />
          <el-step title="订单支付" />
          <el-step title="待审核" />
          <el-step title="订单完成" />
        </el-steps>
      </section>
      <section class="stepCon">
        <section class="title">
          <span>确认产品信息</span>
          <span @click="handleToBack">返回更改配置</span>
        </section>
        <section class="explain">
          <span>请确认产品信息后提交订单，</span>
          <span>最终实付金额以支付订单时为准。</span>
        </section>
        <p class="product">产品清单</p>
        <div class="form">
          <div class="cost">
            <span>预付费用({{ orderList.length || 0 }})</span>
            <span>合计费用: {{ nums || 0 }}元</span>
          </div>
          <el-table :data="orderList" border header-cell-class-name="title-style">
            <el-table-column label="订单编号" align="center" prop="shoppingCarId" />
            <el-table-column label="订单类型" align="center">
              <template #default="scope">
                {{ getEnumsLabel(scope.row.shoppingCarEnums) }}
              </template>
            </el-table-column>
            <el-table-column label="订单摘要" align="center" prop="orderAbstract" />
            <el-table-column label="金额(元)" align="center" prop="updatePrice" />
            <el-table-column label="下单时间" align="center" prop="createTime" />
            <el-table-column label="订单状态" align="center">
              <template #default="scope">
                {{ "待支付" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="price">
          <div class="min-container">
            <el-button type="primary" class="payment" @click="toPay">去支付</el-button>
            <span class="priceAmount">{{ nums || 0 }}元</span>
            <span class="amountTo">合计费用：</span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { list } from "@/api/control/order";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const nums = ref("0"); // 总费用
const ids = ref(); // 待支付列表ID
const orderList = ref([]); // 订单列表
const typeList = ref([
  { value: "CLOUD_SERVER", label: "云服务器" },
  { value: "CLOUD_MARKET", label: "云市场" },
  { value: "GOV_CLOUD", label: "政务云" },
]);

onMounted(() => {
  ids.value = route.query.ids;
  getList();
});

// 获取购物车列表
const getList = () => {
  list({
    params: {
      pageNum: 1,
      pageSize: 1000,
    },
  }).then((res: any) => {
    let list = res.rows;
    orderList.value = list.filter((item: any) => {
      return ids.value.indexOf(item.shoppingCarId) > -1;
    });
    let num = <any>0;
    orderList.value.forEach((item: any) => {
      num += item.updatePrice || 0;
    });
    nums.value = num.toFixed(2);
  });
};

// 获取类型中文名称
const getEnumsLabel = (val: string) => {
  let row = typeList.value.find((i) => i.value == val);
  return row ? row.label : "";
};

// 返回上级
const handleToBack = () => {
  router.go(-1);
};

// 去支付
const toPay = () => {
  router.push("/client/cloudMarketplace/components/shoppingStep2?ids=" + ids.value);
};
</script>
<style lang="less" scoped>
@borbom:1px solid rgba(227, 232, 240, 0.5);
.stepBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 117px;
  border: 2px solid #ffffff;
  background: #ffffff;
  box-shadow: -5px 5px 20px 0px #e3e8f080;
  margin: 20px 0;
}
.stepCon {
  width: 100%;
  padding: 0 30px;
  background: #ffffff;
  margin-bottom: 50px;
  .title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #e3e8f0;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      font-size: 18px;
      font-weight: 600;
    }
    span:nth-child(2) {
      height: 18px;
      display: inline-block;
      font-size: 14px;
      font-weight: 400;
      color: #4098ff;
      padding: 0 20px;
      margin-left: 20px;
      border-left: 2px solid #4098ff;
    }
  }
  .explain {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    letter-spacing: 0.1em;
    span:nth-child(2) {
      font-size: 14px;
      font-weight: 400;
      color: #4098ff;
    }
  }
  .product {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    margin: 40px 0;
  }
  .form {
    width: 100%;
    border: @borbom;
    display: flex;
    overflow: auto;
    font-size: 14px;
    flex-direction: column;
    .cost {
      width: 100%;
      height: 60px;
      display: flex;
      font-weight: 600;
      padding: 0 50px;
      justify-content: space-between;
      align-items: center;
      border-bottom: @borbom;
      .price {
        margin-left: 10px;
        font-size: 20px;
        font-weight: 600;
        color: #ff3939;
      }
    }
  }
}
.price {
  width: 100%;
  height: 95px;
  background: #ffffff;
  display: flex;
  align-items: center;
  .amountTo {
    float: right;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
  }
  .priceAmount {
    margin-left: 10px;
    float: right;
    font-size: 20px;
    font-weight: 600;
    color: #ff3939;
    line-height: 40px;
  }
  .payment {
    width: 126px;
    height: 40px;
    float: right;
    margin-left: 40px;
  }
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
